<!-- components/GlobalLoader.vue -->
<template>
  <div v-if="isLoading" class="global-loader">
    <!-- 使用前面设计的精美加载动画 -->
    <Loading type="fullscreen" text="正在加载页面..." />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Loading from './Loading.vue';

const isLoading = ref(false);

// 暴露控制方法
const show = () => isLoading.value = true;
const hide = () => isLoading.value = false;

// 允许其他组件访问
defineExpose({ show, hide });
</script>

<style scoped>
.global-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(3px);
}
</style>